<template>
    <div class="housing">
        <li>房源管理</li>
        <el-card class="box-card">
            <div class="house_tab">
                <el-button v-for="(v,i) in tablist" :key="i" @click="tabIndex=i" :class="tabIndex===i?'active':''">{{v}}</el-button>
            </div>
            <div class="sell" v-show="tabIndex==0">
              <div class="search">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-select v-model="city1" clearable placeholder="请选择" @change="changeOne" >
                        <el-option v-for="v in option1" :key="v.provinceid" :label="v.province" :value="v.provinceid"></el-option>
                    </el-select>
                    <el-select v-model="city2" clearable placeholder="请选择" @change="changeTwo" >
                        <el-option v-for="v in option2" :key="v.cityid" :label="v.city" :value="v.cityid"></el-option>
                    </el-select>
                    <el-select v-model="city3" clearable placeholder="请选择" @change="changeThree" >
                        <el-option v-for="(v,i) in option3" :key="i" :label="v.area" :value="v.area"></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                  </el-col>
                </el-row>
                <div class="add"><el-button type="primary" @click="addData">新增</el-button></div>
              </div>
              <el-dialog title="" :visible.sync="dialogFormVisible">
                  <el-form :model="form">
                      <el-form-item label="楼盘名称" :label-width="formLabelWidth">
                          <el-input v-model="form.buildName" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="所属区域" :label-width="formLabelWidth">
                          <el-input v-model="form.address" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="价格" :label-width="formLabelWidth">
                          <el-input v-model="form.price" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="更新时间" :label-width="formLabelWidth">
                          <el-input v-model="form.time" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="排序" :label-width="formLabelWidth">
                          <el-input v-model="form.sort" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="状态" :label-width="formLabelWidth">
                          <el-input v-model="form.state" autocomplete="off"></el-input>
                      </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="()=>{
                        dialogFormVisible = false
                        this.form = {
                          buildName: '',
                          address: '',
                          price: '',
                          time: '',
                          sort: '',
                          state: ''
                        }
                      }">取 消</el-button>
                      <el-button type="primary" @click="submin">确 定</el-button>
                  </div>
              </el-dialog>
              <el-table
                  :data="tableList"
                  stripe
                  border >
                  <el-table-column type="index" label="#" ></el-table-column>
                  <el-table-column label="小区名称" prop="buildName" ></el-table-column>
                  <el-table-column label="所属区域" prop="address" ></el-table-column>
                  <el-table-column label="价格" prop="price" ></el-table-column>
                  <el-table-column label="更新时间" prop="time" ></el-table-column>
                  <el-table-column label="排序" width="150" prop="sort" ></el-table-column>
                  <el-table-column label="状态" width="150" >
                    <template slot-scope="scope">
                        <el-switch
                          v-if="scope.row.state === 1"
                          :value="true">
                        </el-switch>
                        <el-switch
                          v-else
                          :value="false">
                        </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" >户型</el-button>
                        <el-button type="text" >相册</el-button>
                        <el-button type="text" >动态</el-button>
                        <el-button type="text" >沙盘</el-button>
                        <el-button type="text" @click="houseEdit(scope.row)" >编辑</el-button>
                        <el-button type="text" @click="houseDelete(scope.row)" >删除</el-button>
                    </template>
                  </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
            <div class="lease" v-show="tabIndex==1">
              <div class="search">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-select v-model="city1" clearable placeholder="请选择" @change="changeOne" >
                        <el-option v-for="v in option1" :key="v.provinceid" :label="v.province" :value="v.provinceid"></el-option>
                    </el-select>
                    <el-select v-model="city2" clearable placeholder="请选择" @change="changeTwo" >
                        <el-option v-for="v in option2" :key="v.cityid" :label="v.city" :value="v.cityid"></el-option>
                    </el-select>
                    <el-select v-model="city3" clearable placeholder="请选择" @change="changeThree" >
                        <el-option v-for="(v,i) in option3" :key="i" :label="v.area" :value="v.area"></el-option>
                    </el-select>
                    <el-input v-model="area" placeholder="请输入内容"></el-input>
                    <el-button type="primary" @click="leaseSearch">搜索</el-button>
                  </el-col>
                </el-row>
                <div class="add"><el-button type="primary" @click="addLease">新增</el-button></div>
              </div>
              <el-dialog title="" :visible.sync="dialogFormVisibleLease">
                  <el-form :model="formlease">
                      <el-form-item label="小区名称" :label-width="formLabelWidth">
                          <el-input v-model="formlease.Villagename" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="标题" :label-width="formLabelWidth">
                          <el-input v-model="formlease.title" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="面积" :label-width="formLabelWidth">
                          <el-input v-model="formlease.Size" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="总价" :label-width="formLabelWidth">
                          <el-input v-model="formlease.price" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="排序" :label-width="formLabelWidth">
                          <el-input v-model="formlease.sort" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="状态" :label-width="formLabelWidth">
                          <el-input v-model="formlease.state" autocomplete="off"></el-input>
                      </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="()=>{
                        dialogFormVisibleLease = false
                        this.formlease = {
                          Villagename: '',
                          title: '',
                          Size: '',
                          price: '',
                          sort: '',
                          state: ''
                        }
                      }">取 消</el-button>
                      <el-button type="primary" @click="subminLease">确 定</el-button>
                  </div>
              </el-dialog>
              <el-table
                  :data="lieaseList"
                  stripe
                  border >
                  <el-table-column type="index" label="#" ></el-table-column>
                  <el-table-column label="小区名称" prop="Villagename" ></el-table-column>
                  <el-table-column label="标题" prop="title" ></el-table-column>
                  <el-table-column label="面积" prop="Size" ></el-table-column>
                  <el-table-column label="总价" prop="price" ></el-table-column>
                  <el-table-column label="排序" prop="sort" ></el-table-column>
                  <el-table-column label="状态" >
                    <template slot-scope="scope">
                        <el-switch
                          v-if="scope.row.state === 1"
                          :value="true">
                        </el-switch>
                        <el-switch
                          v-else
                          :value="false">
                        </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="leaseEdit(scope.row)" >编辑</el-button>
                        <el-button type="text" @click="leaseDelete(scope.row)" >删除</el-button>
                    </template>
                  </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="page.pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
              </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tablist: ['销售楼盘', '房屋租赁'],
      isSwitch: true,
      tabIndex: 0,
      tableList: [],
      lieaseList: [],
      total: 0,
      total2: 0,
      page: {
        pageIndex: 1,
        pageNum: 5,
        state: 1
      },
      page2: {
        pageIndex: 1,
        pageNum: 5,
        state: 0
      },
      formlease: {
        Villagename: '',
        title: '',
        Size: '',
        price: '',
        sort: '',
        state: ''
      },
      dialogFormVisibleLease: false,
      dialogFormVisible: false,
      form: {
        buildName: '',
        address: '',
        price: '',
        time: '',
        sort: '',
        state: ''
      },
      formLabelWidth: '80px',
      city1: '',
      city2: '',
      city3: '',
      option1: [],
      option2: [],
      option3: [],
      provinceid: '',
      cityid: '',
      area1: '',
      area: ''
    }
  },
  created () {
    this.gethouseList()
    this.getLeaseList()
    this.getCityList()
  },
  methods: {
    subminLease () {
      if (this.formlease.id) {
        this.$api.leaseEdit(this.formlease).then(res => {
          console.log(res)
          if (res.data.code === 1) {
            this.formlease = {
              Villagename: '',
              title: '',
              Size: '',
              price: '',
              sort: '',
              state: ''
            }
            this.$message.success('修改成功')
            this.dialogFormVisibleLease = false
            this.getLeaseList()
          }
        })
      } else {
        this.$api.leaseAdd(this.formlease).then(res => {
          console.log(res)
          if (res.data.code === 1) {
            this.formlease = {
              Villagename: '',
              title: '',
              Size: '',
              price: '',
              sort: '',
              state: ''
            }
            this.$message.success(res.data.message)
            this.dialogFormVisibleLease = false
            this.getLeaseList()
          }
        })
      }
    },
    submin () {
      if (this.form.id) {
        this.$api.editHouse(this.form).then(res => {
          console.log(res)
          if (res.data.code === 1) {
            this.form = {
              buildName: '',
              address: '',
              price: '',
              time: '',
              sort: '',
              state: ''
            }
            this.dialogFormVisible = false
            this.gethouseList()
          }
        })
      } else {
        this.$api.addHouse(this.form).then(res => {
          console.log(res)
          if (res.data.code === 1) {
            this.form = {
              buildName: '',
              address: '',
              price: '',
              time: '',
              sort: '',
              state: ''
            }
            this.dialogFormVisible = false
            this.gethouseList()
          }
        })
      }
    },
    gethouseList () { // 获取房源数据
      this.$api.pageHouse({
        pageIndex: this.page.pageIndex,
        pageNum: this.page.pageNum,
        state: this.page.state
      }).then(res => {
        console.log(res)
        this.tableList = res.data.data
        this.total = res.data.total
      })
    },
    getLeaseList () {
      this.$api.pageLease({ ...this.page2 }).then(res => {
        this.lieaseList = res.data.data
        this.total2 = res.data.total
      })
    },
    addData () { // 添加
      this.dialogFormVisible = true
    },
    addLease () { // 添加租赁信息
      this.dialogFormVisibleLease = true
    },
    handleSearch () { // 模糊搜索
      this.$api.searchHouse({
        shengid: this.provinceid,
        cityid: this.cityid,
        area: this.city3
      }).then(res => {
        console.log(res)
        this.tableList = res.data.data
      })
    },
    leaseSearch () { // 租赁搜索
      this.$api.leaseSearch({ area: this.area }).then(res => {
        this.lieaseList = res.data
      })
    },
    houseEdit (row) { // 房源编辑
      console.log(row)
      this.dialogFormVisible = true
      this.form = row
    },
    leaseEdit (row) {
      console.log(row)
      this.dialogFormVisibleLease = true
      this.formlease = row
    },
    handleSizeChange (val) { // 监听每页个数的改变
      this.page.pageNum = val
      this.gethouseList()
    },
    handleCurrentChange (val) { // 监听页数的改变
      this.page.pageIndex = val
      this.gethouseList()
    },
    houseDelete (row) { // 删除
      this.$api.deleteHouse(row.id).then(res => {
        if (res.data.code === 1) {
          this.$message.success(res.data.message)
          this.gethouseList()
        }
      })
    },
    leaseDelete (row) {
      this.$api.leaseDelete(row.id).then(res => {
        if (res.data.code === 1) {
          this.$message.success(res.data.message)
          this.getLeaseList()
        }
      })
    },
    // 三级联动
    getCityList () { // 获取省
      this.$api.getProvince().then(res => {
        if (res.data.code === 1) {
          this.option1 = res.data.data
        }
      })
    },
    changeOne (value) { // 市
      console.log(value)
      this.$api.getCity({ provinceid: value }).then(res => {
        if (res.data.code === 1) {
          this.provinceid = value

          this.option2 = res.data.data
        }
      })
    },
    changeTwo (value) { // 区、县
      console.log(value)
      this.$api.getArea({ cityid: value }).then(res => {
        this.cityid = value
        if (res.data.code === 1) {
          this.option3 = res.data.data
        }
      })
    },
    changeThree (value) {
      this.area1 = value
    }
  }
}
</script>

<style scoped>
.housing{
    width: 100%;
    height: 100%;
}
.box-card{
    margin-top: 10px;
}
.el-button.active{
    background: cornflowerblue;
    color: #fff;
}
.cell{
  text-align: center;
}
.cell span{
  margin: 0 5px;
}
.search{
  margin: 10px 0;
}
.el-col{
  height: 40px;
  display: flex;
}
.add{
  margin-top: 10px;
}
.el-select{
  margin-right: 10px;
}
</style>
